<template>
	<view class="all">
		<view class="nav">
			<text class="statustype">未处理</text>
			<text class="statustype">已处理</text>
			<text class="statustype">全部</text>
		</view>
		<view class="details">
			<view class="details_one">
				<view class="content">
					<view class="description">
						<text class="description_word"> 公共区域有人随意占用,请物管及时.家里墙体有裂纹, 请物管及时排工人
						</text>
					</view>
					<view class="photo">
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-2.jpg" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
					</view>
					<view class="address">
						<text class="room">清水湾1号楼1单元2208</text>
						<text class="room">小区问题</text>
					</view>
					<view class="time">
						<text class="data_time">2021-10-20 10: 20</text>
						<view class="btn">
							<button type="default" class="untreated">未处理</button>
							<button type="default" class="del">撤销</button>
						</view>
					</view>
				</view>

			</view>
			<view class="details_one">
				<view class="content">
					<view class="description">
						<text class="description_word"> 公共区域有人随意占用,请物管及时.家里墙体有裂纹, 请物管及时排工人
						</text>
					</view>
					<view class="photo">
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-2.jpg" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
					</view>
					<view class="address">
						<text class="room">清水湾1号楼1单元2208</text>
						<text class="room">小区问题</text>
					</view>
					<view class="time">
						<text class="data_time">2021-10-20 10: 20</text>
						<view class="btn">
							<button type="default" class="untreated">未处理</button>
							<button type="default" class="del">撤销</button>
						</view>
					</view>
				</view>

			</view>
			<view class="details_one">
				<view class="content">
					<view class="description">
						<text class="description_word"> 公共区域有人随意占用,请物管及时.家里墙体有裂纹, 请物管及时排工人
						</text>
					</view>
					<view class="photo">
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-2.jpg" mode=""></image>
						<image class="img" src="../../static/images/questionsDetails-1.png" mode=""></image>
					</view>
					<view class="address">
						<text class="room">清水湾1号楼1单元2208</text>
						<text class="room">小区问题</text>
					</view>
					<view class="time">
						<text class="data_time">2021-10-20 10: 20</text>
						<view class="btn">
							<button type="default" class="untreated">未处理</button>
							<button type="default" class="del">撤销</button>
						</view>
					</view>
				</view>

			</view>
		</view>

	</view>
</template>

<script>
</script>

<style>
	text {
		display: block;
	}

	.all {
		width: 750rpx;
		height: 100vh;
		margin: 0;
		background-color: #f0f0f0;
	}

	.nav {
		display: flex;
		justify-content: space-around;
		width: 750rpx;
		height: 80rpx;
		line-height: 80rpx;
		color: #000000;
		font-size: 22rpx;
		margin: 0 auto 20rpx;
		background-color: #FFFFFF;
	}
	
	.statustype:hover{
		color: #007AFF;
	}

	.details {
		margin: 0 auto;
	}

	.details_one {
		width: 730rpx;
		height: 515rpx;
		background-color: #FFFFFF;
		margin: 20rpx auto;
	}

	.content {
		width: 660rpx;
		margin: 0 auto;
	}

	.description {
		height: 160rpx;
		font-size: 24rpx;
	}

	.description_word {
		height: 80rpx;
		padding: 30rpx 0;
		overflow: hidden;
		/* white-space: nowrap; */
		text-overflow: ellipsis;
	}

	.photo {
		/* width: 630rpx; */
	}

	.img {
		width: 196rpx;
		height: 152rpx;
	}

	.img:nth-child(2) {
		margin: 0 32rpx;
	}

	.address {
		display: flex;
		justify-content: space-between;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		color: #9e9e9e;
		border-bottom: 2rpx solid #efefef;
	}

	.time {
		height: 100rpx;
		line-height: 100rpx;
		font-size: 20rpx;
		display: flex;
	}

	.data_time {
		width: 360rpx;
	}

	.btn {
		width: 300rpx;
		display: flex;
		margin: auto;
	}

	.untreated {
		width: 130rpx;
		height: 50rpx;
		font-size: 20rpx;
		line-height: 50rpx;
		color: #828282;
		background-color: #FFFFFF;
		margin: 0 20rpx;
		border-color: #828282;
	}

	.del {
		width: 130rpx;
		height: 50rpx;
		font-size: 20rpx;
		line-height: 50rpx;
		color: #FFFFFF;
		background-color: #00a2f1;
	}

	button {
		border-radius: 10rpx;
	}
</style>
